<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-col :span="24">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="left-menu"
        :default-active="$route.path"
        text-color="#fff"
        router
      >
      <!--  -->
      <el-menu-item index="/home">
          <el-icon><document /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <!-- 公告管理 -->
        <el-menu-item index="/nolist">
          <el-icon><document /></el-icon>
          <span>公告管理</span>
        </el-menu-item>
        <!-- 轮播图管理 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>轮播图管理</span>
          </template>
          <!-- 二级菜单 -->
            <el-menu-item index="/bancate">轮播图分类</el-menu-item>
            <el-menu-item index="banlist">轮播图列表</el-menu-item>
        </el-sub-menu>
        <!-- 用户管理 -->
         <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>用户管理</span>
          </template>
          <!-- 二级菜单 -->
            <el-menu-item index="/userlist">用户列表</el-menu-item>
        </el-sub-menu>
        <!-- 商品管理 -->
        <el-sub-menu index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>商品管理</span>
          </template>
          <!-- 二级菜单 -->
            <el-menu-item index="/procate">商品分类</el-menu-item>
            <el-menu-item index="prolist">商品列表</el-menu-item>
            <el-menu-item index="prorder">订单管理</el-menu-item>
        </el-sub-menu>
        <!-- 资讯管理 -->
        <el-sub-menu index="4">
          <template #title>
            <el-icon><location /></el-icon>
            <span>资讯管理</span>
          </template>
          <!-- 二级菜单 -->
            <el-menu-item index="/artcate">分类管理</el-menu-item>
            <el-menu-item index="artlist">资讯管理</el-menu-item>
        </el-sub-menu>

        <!-- 论坛管理 -->
        <el-sub-menu index="5">
          <template #title>
            <el-icon><location /></el-icon>
            <span>论坛管理</span>
          </template>
          <!-- 二级菜单 -->
            <el-menu-item index="/artcate">板块管理</el-menu-item>
            <el-menu-item index="">讨论管理</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="6">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>

      </el-aside>
      <el-container>
        <el-header class="h">
          <div class="header-content">
            <span class="admin-name">管理员: {{ username }}</span>
            <el-button type="danger" @click="logout">退出</el-button>
          </div>
        </el-header>


        <el-main>
            <!-- 右侧主体部分 -->
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
  
<script setup >
import { userinfoRequest } from '@/api/use';
import router from '@/router';
import { useUserStore } from '@/stores/user';
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'


const username = ref('')
  userinfoRequest().then(r => {
    console.log(r);
    username.value = r.data.userName
  });

// 退出功能
async function logout() {
  try {
    // 弹出确认框
    await ElMessageBox.confirm(
      '你确定要退出吗？',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    // 用户点击确认，显示退出成功提示
    ElMessage.success('退出成功');

    const userStore = useUserStore();
    // 移除 token
    await userStore.removeToken();
    // 跳转到登录页
    router.push('/login');
  } catch (error) {
    if (error === 'cancel') {
      // 用户点击取消，显示取消提示
      ElMessage.info('退出已取消');
    } else {
      // 移除 token 或其他操作出错，显示错误提示
      ElMessage.error('退出登录失败，请稍后重试');
      console.error('退出登录失败:', error);
    }
  }
}
</script>
  
<style scoped>
  .left-menu{
    height: 100vh;
  }


.h{
  background-color: #545c64; /* 设置背景颜色 */
  color: white; /* 设置字体颜色 */
  font-size: 20px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体粗细 */
  padding: 10px 20px; /* 设置内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 水平靠左 */
  
}
.header-content {
  display: flex;
  align-items: center;
}

.admin-name {
  margin-right: 20px; /* 增加管理员名称和按钮之间的间距 */
}
</style>